<template>
  <div class="home">
    <div class="op">
      <div class="top">
        <div class="left">
          <van-badge
            :content="noticeList.length + orderList.length"
            style="width: 28px"
            color="#fc8768"
          >
            <div class="message-container" @click="router.push('/message')">
              <div class="message">
                <van-icon class="message-icon" size="20" name="bell" color="#e4f3fe" />
                <span class="message-text">消息</span>
              </div>
            </div>
          </van-badge>
          <div class="message-container">
            <div class="message">
              <van-icon class="message-icon" size="20" name="description" color="#e4f3fe" />
              <span class="message-text">规则</span>
            </div>
          </div>
        </div>
        <h1 class="center">走路赚金币</h1>
        <div class="right">
          <div class="jinbi" @click="taskPanelRef.show()">
            <img src="../../assets/image/icon2.png" alt="" />
            <span>{{ money }}</span>
          </div>
          <div class="qiandao" @click="signIn">
            <van-badge
              :dot="!signStatus"
              style="width: 25px; height: 25px"
              :offset="[-3, 3]"
              color="#fe6418"
            >
              <img src="../../assets/image/icon4.png" alt="" />
            </van-badge>
            <span>{{ signStatus ? '已签到' : '未签到' }}</span>
          </div>
        </div>
      </div>
      <!-- 悬浮球 -->
      <div class="floating-bubble" @click="onBubbleClick">
        <div class="bubble-box">
          <div class="bubble" style="top: 65px">+2</div>
        </div>
        <div class="bubble-box">
          <div class="bubble" style="top: 25px">+2</div>
        </div>
        <div class="bubble-box">
          <div class="bubble" style="top: 45px">+2</div>
        </div>
        <div class="bubble-box">
          <div class="bubble" style="top: 25px">+2</div>
        </div>
        <div class="bubble-box">
          <div class="bubble" style="top: 65px">+2</div>
        </div>
      </div>
      <div class="steps"></div>
    </div>
    <div class="shop">
      <div class="icon"></div>
      <Nav @show-task-panel="taskPanelRef.show()"></Nav>
      <div style="margin-bottom: 10px; padding: 0 10px">租物推荐</div>
      <Product></Product>
    </div>
    <TaskPanel ref="taskPanelRef"></TaskPanel>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Nav from './components/Nav.vue'
import Product from '@/components/Product.vue'
import TaskPanel from './components/TaskPanel.vue'
import router from '@/router'
import useMessageStore from '@/store/message'
import { storeToRefs } from 'pinia'

const messageStore = useMessageStore()
const { noticeList, orderList } = storeToRefs(messageStore)

const money = ref(32)
const signStatus = ref(false)

const taskPanelRef = ref()

const signIn = () => {
  if (signStatus.value) return
  signStatus.value = true
  money.value += 2
  showSuccessToast('签到成功')
}

const onBubbleClick = (e: any) => {
  if (e.target.className !== 'bubble') return
  money.value += 2
  e.target.classList.add('bubble-transition')
  setTimeout(() => {
    e.target.style.display = 'none'
  }, 2000)
}
</script>

<style scoped lang="less">
.home {
  position: relative;

  .op {
    width: 100vw;
    height: 200px;
    background: linear-gradient(to bottom, #3ba3fd, #e2fafd);

    .top {
      display: flex;

      .left,
      .right {
        width: 70px;
        padding-left: 10px;
      }

      .left {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .message-container {
          width: 28px;
          height: 28px;
          background-color: #fff;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;

          .message {
            width: 26px;
            height: 26px;
            background: linear-gradient(to top, #49a6ed, #8ac6eb);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;

            .message-icon {
              margin-bottom: 3px;
            }

            .message-text {
              font-size: 10px;
              color: #fff;
              position: absolute;
              top: 23px;
            }
          }
        }
      }

      .right {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 73px;

        .jinbi,
        .qiandao {
          height: 35px;
          padding-left: 5px;
          background-color: #c9ebff;
          border-radius: 18px 0 0 18px;
          display: flex;
          align-items: center;
          line-height: 35px;
          color: #0c746a;

          img {
            width: 25px;
          }
          span {
            margin-left: 3px;
          }
        }

        .jinbi {
          font-size: 16px;
          font-weight: 600;
        }
        .qiandao {
          font-size: 12px;
        }
      }

      .center {
        height: 100px;
        flex: 1;
        text-align: center;
        line-height: 100px;
        color: #fff;
        font-size: 35px;
        margin: 0;
        font-style: italic;
      }
    }

    .floating-bubble {
      padding: 0 30px;
      height: 100px;
      display: flex;
      justify-content: space-around;

      .bubble-box {
        position: relative;
        flex: 1;

        .bubble {
          height: 50px;
          width: 50px;
          border-radius: 50%;
          position: absolute;
          left: 50%;
          transform: translate(-50%, -50%);
          background: radial-gradient(circle at 100% 100%, #7ddcab, #72e3ac);
          box-shadow:
            0 10px 10px rgba(120, 228, 183, 0.1),
            inset 0 10px 10px rgba(61, 194, 165, 0.8),
            inset 0 -10px 10px rgba(148, 238, 185, 0.1);
          text-align: center;
          line-height: 50px;
          color: #fff;
          font-size: 20px;
        }

        .bubble-transition {
          // display: none;
          animation: fadeUp 2s ease-out;
        }

        @keyframes fadeUp {
          0% {
            opacity: 1;
            transform: translateX(-25px) translateY(-18px);
          }
          100% {
            opacity: 0;
            transform: translateX(-25px) translateY(-50px);
          }
        }
      }
    }
  }

  .steps {
    height: 170px;
    background: url('../../assets/image/home.png');
  }

  .shop {
    width: 100%;
    background-color: #fff;
    border-radius: 20px 20px 0 0;
    position: absolute;
    top: 365px;

    .icon {
      width: 30px;
      height: 3px;
      background-color: #e2e2e2;
      margin: 10px auto 20px auto;
    }
  }
}
</style>
